<template>
    <view class="container">
        <view class="filters">
            <picker mode="selector" :range="dates" onChange="onDateChange">
                <view class="picker">
                    <text>{{ selectedDate }}</text>
                </view>
            </picker>
            <picker mode="selector" :range="categories" onChange="onCategoryChange">
                <view class="picker">
                    <text>{{ selectedCategory }}</text>
                </view>
            </picker>
        </view>

        <view class="item-list">
            <block v-for="(item, index) in items" :key="index">
                <view class="item">
                    <view class="item-header">
                        <text>{{ item.date }}</text>
                        <text>{{ item.time }}</text>
                    </view>
                    <view class="item-content">
                        <text>{{ item.category }}</text>
                        <text class="price">¥{{ item.price }}</text>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

export default {
    data() {
        return {
            dates: ['日支出', '月支出', '年支出'],
            categories: ['住宿', '饮食', '娱乐', '交通'],
            selectedDate: '日支出',
            selectedCategory: '住宿',
            items: [
                {
                    date: '2024.2.27',
                    time: '14:27:56',
                    category: '住宿',
                    price: '28.00'
                },
                {
                    date: '2024.2.27',
                    time: '14:27:56',
                    category: '住宿',
                    price: '28.00'
                },
                {
                    date: '2024.2.27',
                    time: '14:27:56',
                    category: '住宿',
                    price: '28.00'
                },
                {
                    date: '2024.2.27',
                    time: '14:27:56',
                    category: '住宿',
                    price: '28.00'
                },
                {
                    date: '2024.2.27',
                    time: '14:27:56',
                    category: '住宿',
                    price: '28.00'
                },
                {
                    date: '2024.2.27',
                    time: '14:27:56',
                    category: '住宿',
                    price: '28.00'
                }
            ]
        };
    },
    methods: {
        onDateChange(e) {
            this.setData({
                selectedDate: this.dates[e.detail.value]
            });
        },

        onCategoryChange(e) {
            this.setData({
                selectedCategory: this.categories[e.detail.value]
            });
        }
    }
};
</script>
<style>
.container {
    padding: 10px;
}

.filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.picker {
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 5px;
}

.item-list {
    border: 1px solid #ccc;
    border-radius: 5px;
}

.item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;
    padding: 10px;
}

.item-header {
    display: flex;
    justify-content: space-between;
}

.item-content {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.price {
    color: red;
    font-weight: bold;
}

</style>
